<template>
    <div class="path-wrapper">
        <div class="path-block">
            <div>路径Mx1 y1 Lx2 y2 Hx3 Vy3 Z</div>
            <svg id="svg1" width="200" height="100">
                <path d="M20 20 H180 V80 L100 90 Z" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>

        <div class="path-block">
            <div>圆弧 Mx1 y1 Arx ry x-axis-rotation(x轴旋转角度) large-arc-flag(大还是小圆弧) sweep-flag(逆时针还是顺时针绘制圆弧) x y</div>
            <svg id="svg1" width="200" height="100">
                <path d="M20 50 A100 50 20 0 0 180 50" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>

        <div class="path-block">
            <div>三次贝塞尔曲线 Cx1,y1 x2,y2, x, y</div>
            <svg id="svg1" width="200" height="100">
                <path d="M20 20 C90,40 130,40 180,20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>

        <div class="path-block">
            <div>三次贝塞尔平滑曲线 Cx1,y1 x2,y2 x,y Sx1,y1 x,y</div>
            <svg id="svg2" width="300" height="100">
                <path d="M20 20 C90 40 130 40 180 20 S250 60 280 20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>

        <div class="path-block">
            <div>二次贝塞尔曲线 Qx1,y1 x,y</div>
            <svg id="svg2" width="300" height="100">
                <path d="M20 20 Q100,140 180,20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>

        <div class="path-block">
            <div>二次贝塞尔光滑曲线 Qx1,y1 x,y Sx2,y2 x,y</div>
            <svg id="svg2" width="400" height="200">
                <path d="M20 100 Q100,200 200,100 S280,0 380,100" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
            <div>二次贝塞尔光滑曲线 Qx1,y1 x,y Tx,y</div>
            <svg id="svg2" width="400" height="200">
                <path d="M20 100 Q100,200 200,100 T380,100" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
            </svg>
        </div>
    </div>
</template>

<style scoped>
.path-wrapper {
    height: 100%;
    padding:10px;
    overflow: auto;
}

svg {
    border: 1px solid #000000;
}

.path-block {
    margin-bottom: 10px;
}
</style>